/****************************************卡券列表组件*/
.c-list li {
    background: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.c-list .coupon-body {
    min-height: 80px;
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

.c-list .overTime{
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

/*卡券左边*/
.coupon-body .coupon-type {
    width: 100px;
}

.coupon-type .c-price {
    color: #FF6000;
    padding: 2px 0;
    text-align: center;
}

.coupon-type .c-price span {
    font-size: 32px;
    font-weight: 800;
}

.coupon-type .c-price em {
    font-size: 12px;
}

.coupon-type .c-type_name {
    font-size: 12px;
    text-align: center;
}

/*卡券中间*/

.coupon-body .coupon-content {
    padding: 5px;
    width: calc(100% - 190px);
}

.coupon-content .c-name {
    margin: 4px 0;
    font-size: 14px;
}

.coupon-content .c-name span {
    display: inline-block;
    background: #FFD001;
    color: #333;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 5px;
    height: 15px;
    line-height: 15px;
    margin-right: 2px;
    vertical-align: bottom;
}

.coupon-content .c-time {
    font-size: 12px;
    color: #373737;
    padding: 4px 0;
}

.coupon-content .c-rule {
    font-size: 12px;
    color: #373737;
}


/*卡券按钮*/

.coupon-body .coupon-btn {
    width: 60px;
}

.coupon-btn .c-button {
    margin: 24px 0;
    border-radius: 5px;
}


/********************************************卡券详情组件****************************/

/*整体框架*/
.coupon-show {
    width: 90%;
    margin: 10px auto;
    position: relative;
    -webkit-mask: radial-gradient(circle at 0 115px, transparent 10px, #fff 0), radial-gradient(circle at right 115px, transparent 10px, #fff 0);
    -webkit-mask-size: 51%;
    border-radius: 5px;
    -webkit-mask-position: 0, 100%;
    -webkit-mask-repeat: no-repeat;
    background: #fff
}

.coupon-show::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 5px;
    top: 0;
    right: -5px;
    background-image: linear-gradient(to bottom, #f5f5f5 5px, transparent 5px, transparent),
    radial-gradient(10px circle at 5px 10px, transparent 5px, #fff 5px);
    background-size: 5px 15px;
}

/*卡券内容*/
.coupon-content {
    padding: 15px;
}

/*卡券头部*/
.show-head {
    height: 93px;
    border-bottom: 2px dashed #f5f5f5;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.show-head .coupon-type {
    margin-right: 10px;
}

.show-head .show-name {
    padding: 5px;
    width: calc(100% - 72px);
}

.show-head .show-name p {
    font-weight: 800;
}

/*卡券身体*/
.coupon-show .show-body .c-s-b-qrcode {
    padding: 20px;
    text-align: center;
}

.coupon-show .show-body .c-s-b-qrcode .qr-img {
    width: 100%;
    height: 150px;
}

.coupon-show .show-body .c-s-b-qrcode .key {
    font-size: 16px;
    color: #FF6000;
    font-weight: bold;
}

.coupon-show .show-body .place {
    font-size: 14px;
    color: #999;
}

.coupon-show .show-body .place .van-row {
    padding: 5px 0;
}

.coupon-show .show-body .place span {
    color: #333;
}